<template>
  <div class="mask" v-if="showMask">
    <div class="title" v-if="title">{{title}}</div>
    <div class="title1" v-if="title1">{{title1}}</div>
    <div class="content" v-html="content">
    </div>
    <div class="btn-more" v-if="title" :style="lang == 'en' && url != '/houseList' ? 'background: none' : ''">
      <a v-if="lang == 'zh'">
        <a :href="url" v-if="url">了解更多 <span class="arrow-right"></span></a>
        <a v-else>正在完善</a>
      </a>
      <a v-else-if="lang == 'en'">
        <router-link :to="url" v-if="url == '/houseList'">
          View More <span class="arrow-right"></span>
        </router-link>
      </a>
    </div>
    <div class="close" @click="handleClose">
      ×
    </div>
  </div>
</template>
<script>
  let common = require("../../../wechat/static/common/common.js");
  export default {
    data() {
      return {
      }
    },
    props: {
      lang: {
          default: ""
      },
      content: "",
      title: "",
      title1: "",
      url: "",
      showMask: {
        type: Boolean,
        default: false
      }
    },
    components: {

    },
    mounted() {
      this.lang = common.getCookie("LANG")
    },
    methods: {
      handleClose() {
        this.$emit("handleCloseMask", false)
      }
    }
  };
</script>
<style lang="less">
  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: .85;
    background: #000;
    z-index: 99;
    top: 0;
    left: 0;
    font-size: .5rem;
    overflow-y: scroll;
    .title {
      color: #fff;
      font-size: .46rem;
      margin-top: 3.54rem;
      margin-left: .72rem;
      position: relative;
      &:after {
        content: "";
        position: absolute;
        left: 0;
        width: .4rem;
        height: 2px;
        background-color: #fff;
        bottom: -.24rem;
      }
    }
    .title1 {
      color: #fff;
      font-size: .38rem;
      margin-top: 3.54rem;
      text-align: center;
    }
    div.content {
      color: #fff;
      font-size: .27rem;
      padding: .7rem;
      text-align: justify;
      p {
        text-align: justify;
        img {
          width: 3rem;
          vertical-align: middle;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        span {
          color:#fff!important;
        }
      }
    }
    .close {
      width: .89rem;
      height: .89rem;
      line-height: .89rem;
      text-align: center;
      border-radius: 50%;
      border: 1px solid #fff;
      color: #fff;
      position: fixed;
      margin: .27rem auto;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0rem;
    }
    .btn-more {
      background-color:#2674E4;
      font-size: .25rem;
      text-align: center;
      color: #fff;
      width: 1.81rem;
      height: .68rem;
      line-height: .68rem;
      margin-left: .72rem;
      a {
        color: #fff;
      }
      .arrow-right {
        position: relative;
        &:after {
          content: "";
          width: .08rem;
          height: .08rem;
          border: 1px solid #fff;
          transform: rotate(45deg);
          border-bottom: 0;
          border-left: 0;
          display: inline-block;
          vertical-align: middle;
          margin-right: .1rem;
        }
      }
    }
  }
</style>
